<template>
  <div class="register-content">

    <div class="form weui-cells weui-cells_form" style="margin-top: 0;">

      <div class="weui-cell weui-cell_vcode mobile" style="padding: 0 0 0 .4rem">
        <div class="weui-cell__hd">
          <label class="weui-label">手机号</label>
        </div>
        <div class="weui-cell__bd">
          <input class="weui-input" type="tel" placeholder="请输入手机号" v-model="mobile">
        </div>
        <div class="weui-cell__ft">
          <a href="javascript:;" class="weui-vcode-btn" v-on:click="getCode"
             style="font-size: 0.373333rem;color: #ff6600;">获取验证码</a>
        </div>
      </div>

      <div class="weui-cell">
        <div class="weui-cell__hd"><label class="weui-label">验证码</label></div>
        <div class="weui-cell__bd">
          <input class="weui-input" type="text" pattern="[0-9]*" placeholder="请输入短信中的验证码" v-model="code"/>
        </div>
      </div>

    </div>

    <div class="button-sp-area" style="margin-top: 1.173333rem;">
      <a href="javascript:;" class="register weui-btn weui-btn_plain-primary" v-on:click="bindMember">绑定</a>
    </div>


    <div id="dialog1" v-show="showAlert">
      <div class="weui-mask"></div>
      <div class="weui-dialog weui-skin_android">
        <div class="weui-dialog__hd"><strong class="weui-dialog__title"
                                             style="font-size: .54rem;color: #333">提示</strong></div>
        <div class="weui-dialog__bd" style="font-size: .427rem; color: #666">{{alertText}}</div>
        <div class="weui-dialog__ft">
          <!--<a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_default" v-on:click="cancelAlert">取消</a>-->
          <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_primary" v-on:click="cancelAlert"
             style="color: #ff6600">{{alertBtn}}</a>
        </div>
      </div>
    </div>

    <loading :show="showLoading" :text="showLoadingText"></loading>
    <toast v-model="showToast" width="5rem" :type="toastType" :time="800" :text="toastText"></toast>


  </div>
</template>
<script>
  import {Loading, Toast} from 'vux'
  import {utils} from './../common/utils/utils'
  import {oauth} from './../common/utils/oauth'

  const common = require('./../common/utils/common')
  const enumerations = require('./../common/utils/enumerations')
  const error = require('./../common/utils/error')

  export default {
    components: {
      Loading,
      Toast
    },
    data() {
      return {
        mchCodeByUrl: common.getUrlParam('mchCode'),
        openidByUrl: common.getUrlParam('openid'),
        cacheMchCode: localStorage.getItem('mchCode'),
        cacheMchType: localStorage.getItem('type'),
        openid: localStorage.getItem('openid'),

        mobile: '',
        code: '',

        showAlert: false,
        alertText: '该手机号已注册，请直接绑定会员',
        alertBtn: '',

        showMask: false,
        showLoading: false,
        showLoadingText: '',
        showToast: false,
        toastType: 'cancel',
        toastText: '',
      }
    },
    beforeCreate() {
      document.title = '绑定会员'
    },
    async created() {
      const _this = this

      //验证权限
      oauth.checkOauth(utils, _this)

      this.mobile = this.$route.params.mobile

    },
    methods: {
      getCode: function () {
        const _this = this

        const ajax = this.$http.create({
          headers: {'content-type': 'application/x-www-form-urlencoded'}
        })

        if (!common.checkMobile(this.mobile)) {
          this.showToast = true
          this.toastText = '请填写正确的手机号'
        } else {
          this.showLoading = true

          const data = {
            openid: this.openid,
            mobile: this.mobile,
            mchCode: this.cacheMchCode
          }

          utils.getCode(ajax, data, _this);
          this.alertBtn = '确定'
        }
      },

      cancelAlert: function () {
        this.showAlert = false
      },

      bindMember: function () {
        const _this = this

        const ajax = this.$http.create({
          headers: {'content-type': 'application/x-www-form-urlencoded'}
        })

        if (!common.checkMobile(this.mobile)) {
          this.showToast = true
          this.toastText = '请填写正确的手机号'
        } else if (common.isEmptyString(this.code)) {
          this.showToast = true
          this.toastText = '请输入验证码'
          this.toastType = 'cancel'
        } else {
          this.showLoading = true

          const data = {
            openid: this.openid,
            mobile: this.mobile,
            code: this.code,
            mchCode: this.cacheMchCode
          }

          ajax.post(this.$apiRoute.bindMb, this.$qs.stringify(data))
            .then(function (response) {
              _this.showLoading = false
              let res = response.data

              if (res.code === 200) {
                _this.openid = res.values.openid
                localStorage.setItem("openid", _this.openid)

                _this.$router.push({
                  path: 'center',
                  params: ''
                })
              } else {

                const errorInfo = error[result["code"]]

                if(utils.isEmptyObject(errorInfo)) {
                  _this.showAlert = true
                  _this.alertText = res.msg
                  _this.alertBtn = '确定'
                } else {
                  _this.$router.push(errorInfo)
                }
              }

            })
        }
      }

    }
  }
</script>
<style scoped>
  @import "./../assets/css/register.css";
  @import "~weui";
</style>
